<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>sakura blog</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <script src="js/jquery-2.1.4.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <!--[if IE]>
    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
    <!--[if IE 6]>
    <script src="js/belatedPNG.js"></script>
    <script>
        DD_belatedPNG.fix('*');
    </script>
    <![endif]-->
    <script src="js/jquery-1.4.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="js/loopedslider.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript" charset="utf-8">
        $(function(){
            $('#slider').loopedSlider({
                autoStart: 6000,
                restart: 5000
            });

        });
    </script>
    <style>
        #sitenav a{
            text-decoration: none;
        }
    </style>
    <link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<script src="js/model.js"></script>
<script src="js/controller.js"></script>
<script src="js/view.js"></script>
<div id="bodywrap" style="background: none;width: 80%;height: 100%" >

    <section id="pagetop">
        <p id="siteinfo">
            welcome!
        </p>
        <nav id="sitenav">
            <ul>
                <li ><a href="index.html">Home</a></li>
                <li><a href="about.html">About Me</a></li>
                <li><a href="contact.html">Contact</a></li>
                <li class="current"><a href="userLogin.html">l/r</a></li>

            </ul>

        </nav>
    </section>
    <header id="pageheader">
        <h1>
            <span>Login</span>
        </h1>
    </header>
    <div  style="background: none">
        <div  style="margin-top: 0%;width: 50%;margin-left: 25%">
            <div style="border: 1px solid #6dbfff;background-color: white;opacity: 0.7">
                <div style="margin-bottom: 5%;margin-left: 20%;margin-top: 15%">
                    <lable>E-mail&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</lable>
                    <input id="email" name="email" type="email">
                    <!--<button class="btn btn-default"style="outline: none;margin-left: 20px">sendEmail</button>-->
                </div>
                <div style=";margin-left: 20%;">
                    <button id="sendEmail" class="btn btn-default"style="outline: none;">sendEmail</button>
                    <p id="resendTime" style="display: inline"></p>

                </div>
                <div style="margin-bottom: 5%;margin-left: 20%;margin-top: 5%">
                    <lable>VerifyCode&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</lable>
                    <input id="verifyCode" name="verifyCode"type="text">
                </div>
                <div style="margin-bottom: 5%;margin-left: 20%;margin-top: 5%">
                    <lable>NickName&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</lable>
                    <input id="nickName" name="nickName" type="text">
                </div>
                <div style="margin-bottom: 5%;margin-left: 20%;margin-top: 5%">
                    <lable>Password&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</lable>
                    <input id="password" name="password" type="text">
                </div>
                <div style="margin-bottom: 5%;margin-left: 20%;margin-top: 5%;margin-right: 20%">
                    <button id="submit" class="btn btn-default"style="outline: none;">submit</button>
                </div>
            </div>

        </div>
    </div>

</div>
<canvas id="canvas"  style="z-index: -1;position:absolute;top: 0;margin: auto"></canvas>

</body>

<script type="text/javascript">
    var canvas = document.getElementById("canvas");
    var ctx = canvas.getContext('2d');
    document.body.style.height   = window.innerHeight+'px';
    document.body.style.width   = window.innerWidth+'px';
    canvas.width = document.body.offsetWidth;
    canvas.height =  document.body.offsetHeight;

    function rand(min, max) {
        return parseInt(Math.random() * (max - min + 1) + min);
    }

    function Round() {
        //随机大小
        this.r = rand(5, 10);
        //随机位置
        var x = rand(0,canvas.width - this.r);//仿制超出右边界
        this.x = x<this.r ? this.r:x;
        var y = rand(0,canvas.height - this.r);
        this.y = y<this.r ? this.r:y;
        //随机速度
        var speed = rand(1, 6);
        this.speedX = rand(0, 4) > 2 ? speed : -speed;
        this.speedY = rand(0, 4) > 2 ? speed : -speed;

    }
    Round.prototype.draw = function() {
        ctx.fillStyle = 'rgba(200,200,200,0.5)';
        ctx.beginPath();
        ctx.arc(this.x, this.y, this.r, 0, 2 * Math.PI, true);
        ctx.closePath();
        ctx.fill();
    }
    Round.prototype.links = function(){
        for (var i=0;i<ballobj.length;i++) {
//                  var ball = ballobj[i];
            var l = Math.sqrt((ballobj[i].x - this.x)*(ballobj[i].x - this.x)+(ballobj[i].y - this.y)*(ballobj[i].y - this.y));
            var a = 1/l *100;
            if(l<250){
                ctx.beginPath();
                ctx.moveTo(this.x,this.y);
                ctx.lineTo(ballobj[i].x,ballobj[i].y);
                ctx.strokeStyle = 'rgba(200,200,200,'+a+')';
                ctx.stroke();
                ctx.closePath();
            }
        }
    }
    Round.prototype.move = function() {
        this.x += this.speedX/10;
        if (this.x > canvas.width  || this.x < 0) {
            this.speedX *= -1;
        }
        this.y += this.speedY/10;
        if (this.y > canvas.height  || this.y < 0) {
            this.speedY *= -1;
        }
    }
    var ballobj = [];

    function init() {
        for (var i = 0; i < 30; i++) {
            var obj = new Round();
            obj.draw();
            obj.move();
            ballobj.push(obj);
        }
    }
    init();
    function ballmove(){
        ctx.clearRect(0,0,canvas.width,canvas.height);
        for (var i=0;i<ballobj.length;i++) {
            var ball = ballobj[i];
            ball.draw();
            ball.move();
            ball.links();
        }
        window.requestAnimationFrame(ballmove);
    }
    ballmove();



</script>
<script>
    $('#sendEmail').click(function () {
        var email = $('#email').val();
        if(email == ''){
            alert("请输入邮箱");
        }else{
            $(this).attr('disabled',"true");
            var time = 60;
            function resendEmail() {
                time --;
                $('#resendTime').html('Resend after '+time+' seconds')
                if(time == 0){
                    clearInterval(timer);
                    $('#sendEmail').removeAttr("disabled");
                    $('#resendTime').html("click to Resend Email");
                }
            }
            var timer = setInterval(function(){resendEmail()},1000)
        }
        mvc.controller.sengRegisterEmail(email);
    });
    $('#submit').click(function () {
        var email = $('#email').val();
        var verifyCode = $('#verifyCode').val();
        var nickName = $('#nickName').val();
        var password = $('#password').val();
        if(email==''){
            alert('输入邮箱');
        }else if(verifyCode==''){
            alert('输入验证码');
        }else if(nickName==''){
            alert('输入昵称');
        }else if(password==''){
            alert('输入密码');
        }else{
            mvc.controller.register(email,verifyCode,nickName,password);
        }

    });
</script>
</html>